<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表+表单+新元素</title>
	</head>
	<body>
		<h1>列表元素  集合-一组相同数据</h1>
		<!-- 第一种使用方法  无序列表  使用率高  网站优化  有利于seo优化 -->
		<ul>
			<li>美国队长</li>
			<li>魔童闹海</li>
			<li>复仇者联盟</li>
		</ul>
		<!-- 第一种使用方法  有序列表 -->
		<ol>
			<li>海贼王</li>
			<li>喜羊羊与灰太狼</li>
			<li>数码宝贝</li>
		</ol>
		<!-- 第一种使用方法  定义列表  解释小图片-->
		<dl>
			<dt><img src="img/二哈gif表情包(10)_爱给网_aigei_com.gif" alt="" /></dt>
			<dd>这是小黑</dd>
		</dl>
		<h1>表单元素</h1>
		<!-- 采集用户信息  账户登录 颜色 功能型操作 -->
		<form>
		账号：<input type="text" />
		密码：<input type="password" />
		<button>按钮</button>
		<input type="submit" />
		<input type="reset" />
		男 <input type="radio" name="sex">
		女 <input type="radio" name="sex">
		肉<input type="checkbox">
		汤<input type="checkbox">
		</form>
		<h1>新元素</h1>
		lorem<mark>lorems</mark>
		<meter value="60" max="100" min="1"></meter>
		<!-- 细节元素 -->
		<details>
			<summary>默认显示效果</summary>
			<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta totam saepe quia illo esse sapiente repellat, at provident tenetur dolore obcaecati modi temporibus quo dicta fugit sequi nesciunt fugiat voluptatum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio earum iste nobis adipisci amet odit reprehenderit. Aliquid cum accusamus temporibus sunt, vitae aperiam ipsum corrupti voluptatem consequatur sit. Quaerat, molestiae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat alias fugiat quis voluptatum molestiae totam! Perspiciatis natus veritatis incidunt aliquid! Quidem et mollitia cumque inventore, error perspiciatis quia dolor exercitationem!</div>
			</details>
	</body>
</html>